<template>
  <view class="my-collection-container py-[20rpx] box-border">
    <view
      class="collection-list-item px-[30rpx] pb-[30rpx] box-border bg-white"
      v-for="(item, index) in list"
      :key="index"
    >
      <videoItem :videoContent="item"></videoItem>
    </view>
    <!-- 加载状态 -->
    <uni-load-more
      :status="loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多了',
      }"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";

// 响应式数据
const list = reactive([
  {
    collectTime: "2025年2月14日",
    videoPoster:
      "https://img1.baidu.com/it/u=2106142011,1410854447&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=26d84943f61687a3f3e58b83205966cd",
    videoTitle: "这是一个视频标题",
    videoContent:
      "文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
    time: "2025年2月13日 22:23:54",
  },
  {
    collectTime: "2025年2月14日",
    videoPoster:
      "https://img1.baidu.com/it/u=2106142011,1410854447&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=26d84943f61687a3f3e58b83205966cd",
    videoTitle: "这是一个视频标题",
    videoContent:
      "文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
    time: "2025年2月13日 22:23:54",
  },
]);
const currentPage = ref(1);
const total = ref(0);
const loadStatus = ref("more"); // more|loading|noMore
const pageSize = 10;

// 初始化加载
onMounted(() => {
  fetchData();
});

// 上拉加载更多
onReachBottom(() => {
  if (loadStatus.value === "more") {
    currentPage.value++;
    fetchData();
  }
});

// 下拉刷新
onPullDownRefresh(async () => {
  currentPage.value = 1;
  list.value = [];
  await fetchData(true);
  uni.stopPullDownRefresh();
});

// 请求数据
const fetchData = async (isRefresh = false) => {
  if (loadStatus.value === "loading") return;

  loadStatus.value = "loading";

  try {
    // 模拟API请求
    const res = await uni.request({
      url: "/api/list",
      method: "GET",
      data: {
        page: currentPage.value,
        pageSize,
      },
    });

    // 更新数据
    total.value = res.total;
    list.value = [...list.value, ...res.data];

    // 更新加载状态
    loadStatus.value = list.value.length >= total.value ? "noMore" : "more";
  } catch (error) {
    // 错误处理
    currentPage.value = Math.max(1, currentPage.value - 1);
    loadStatus.value = "more";
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  }
};

const scanNewsDetail = () => {
  uni.navigateTo({
    url: "/subPages/news/detail?id=1",
  });
};
</script>

<style lang="scss" scoped>
.my-collection-container {
  .collection-list-item:first-child {
    padding-top: 30rpx;
  }
}
</style>
